<template>
 <div class="todo-main">
   <ul>
     <transition-group name="todo" appear>
      <todo-item v-for="todoObj in todos" :key="todoObj.id" :todoObj="todoObj" />
    </transition-group>
   </ul>
 </div>
</template>

<script>
import TodoItem from './TodoItem'
export default {
  name: 'TodoList',
  components: { TodoItem },
  props: ['todos']
}
</script>
<style lang="less" scpoed>

.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0;
}
.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
.todo-enter-active {
  animation: todo 1s;
}
.todo-leave-active {
  animation: todo 1s reverse;
}
@keyframes todo {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
</style>
